import useGlobalAPI from '@/hooks/useGlobalAPI'
import {toStandardConfig, toAlarmConfig, toDeviceShare} from '@/libs/pageRedirect'
import {message} from 'ant-design-vue'
import {PropType} from 'vue'
import {IconImg} from '../image'
import {CnNormalSpan} from '../text'
import './calibrationConf.less'
import {selectCalibrationConfApi, exeCalibrationApi} from '@/api/calibrationConf.ts'
import {calibrationConfType, calibrationConfListType} from './calibrationConfType.ts'

export enum DevFunNameEnum {
  '0001' = '基本信息',
  '0002' = '分享设备',
  '0003' = '故障反馈',
  '0005' = '设备日志',
  '0009' = '采集频率',
  '0064' = '数据开关',
  '0075' = '合格标准',
  '0148' = '报警配置',
  '0149' = '产品资料'
}
export enum DevFunImgNameEnum {
  '0001' = 'devInfo',
  '0002' = 'shareDevice-sm',
  '0003' = 'faultFeedback',
  '0005' = 'devLog',
  '0009' = 'standard-sm',
  '0064' = 'paramSwitch',
  '0075' = 'standard-sm',
  '0148' = 'warnning-triangle-sm',
  '0149' = 'productFile-sm',
  '0250' = 'data-history-icon',
  '0258' = 'additional_settings',
  '0209' = 'fun_control',
  '0270' = 'calibration'
}

export enum QuickFunNameEnum {
  '0165' = '标准配置',
  '0166' = '报警配置',
  '0167' = '设备分享',
  '0168' = '公司设置',
  '0169' = '手机换绑',
  '0170' = '产品资料',
  '0171' = '联系客服',
  '0187' = '大屏数据'
}
export enum QuickFunImgNameEnum {
  '0165' = 'standard',
  '0166' = 'warnning-triangle',
  '0167' = 'shareDevice',
  '0168' = 'company',
  '0169' = 'changePhone',
  '0170' = 'productFile',
  '0171' = 'contactUs',
  '0187' = 'screenDisplay'
}

export const QuickUtilButton = defineComponent({
  props: {
    onClick: Function,
    dictCode: {
      type: String as PropType<QuickFunCode>,
      required: true
    }
  },
  setup(props, ctx) {
    const {router} = useGlobalAPI()

    function handleQiuickClick() {
      switch (props.dictCode) {
        case '0165':
          router.push({
            path: '/CBC/standardConfig'
          })
          break
        case '0166':
          router.push({
            path: '/CBC/alarmConfig'
          })
          break
        case '0167':
          router.push({
            path: '/CBC/deviceShare'
          })
          break

        case '0005':
          alert('0005')
          break

        case '0009':
          alert('0009')
          break

        case '0168':
          console.log('修改公司名称弹窗')
          break
        case '0169':
          console.log('修改手机号弹窗')
          break
        case '0170':
          console.log('产品资料')
          break
        case '0171':
          console.log('联系我们')
          break
        default:
          break
      }
    }

    return () => (
      <div
        class='w-64 h-64 flex flex-col justify-center items-center cursor-pointer'
        onClick={() => {
          if (props.onClick) {
            props.onClick()
          } else {
            handleQiuickClick()
          }
        }}
      >
        <IconImg
          imgName={QuickFunImgNameEnum[props.dictCode]}
          class='w-32 h-32 transition-all transform hover:opacity-105'
        ></IconImg>
        <CnNormalSpan class='text-12 text-text mt-4'>
          {QuickFunImgNameEnum[props.dictCode] || '---'}
        </CnNormalSpan>
      </div>
    )
  }
})

export const UtilButton = defineComponent({
  props: {
    onClick: Function,
    dictCode: {
      type: String as PropType<QuickFunCode>,
      required: true
    }
  },
  setup(props, ctx) {
    function handleQiuickClick() {
      switch (props.dictCode) {
        default:
          break
      }
    }

    return () => (
      <div
        class='w-64 h-64 flex flex-col justify-center items-center cursor-pointer'
        onClick={() => {
          if (props.onClick) {
            props.onClick()
          } else {
            handleQiuickClick()
          }
        }}
      >
        <IconImg
          imgName={QuickFunImgNameEnum[props.dictCode]}
          class='w-32 h-32 transition-all transform hover:opacity-105'
        ></IconImg>
        <CnNormalSpan class='text-12 text-text mt-4'>
          {QuickFunNameEnum[props.dictCode] || '---'}
        </CnNormalSpan>
      </div>
    )
  }
})

export const UtilButtonLine = defineComponent({
  props: {
    onClick: Function,
    value: {
      type: Object as PropType<DeviceManagement.UtilData>,
      required: true
    }
  },
  setup(props, ctx) {
    const {router} = useGlobalAPI()

    function handleQiuickClick() {
      switch (props.value.devFunCode) {
        case '0075':
          toStandardConfig()
          break
        case '0148':
          toAlarmConfig()
          break
        case '0002':
          toDeviceShare()
          break
        case '0250':
          // alert(JSON.stringify(props.value))
          router.push({
            path: `/CBC/dataOverview/singleDevParams`,
            query: {
              devId: props.value.devId
            }
          })
          break

        // 设备日志
        case '0005':
          console.log('设备日志跳转', props.value)

          router.push({
            path: `/devLog/home`,
            query: {
              devId: props.value.devId
            }
          })
          break

        // 采集频率
        case '0009':
          router.push({
            path: `/dataCollection/home`
          })
          break

        // 数据开关
        case '0064':
          router.push({
            path: `/dataCollection/home`
          })
          // router.push({
          //   path: `/CBC/dataOverview/singleDevParams`,
          //   query: {
          //     devId: props.value.devId
          //   }
          // })
          break

        case '0270':
          console.log('校准配置')
          isShowCalibrationModal.value = true
          selectCalibrationConfListFunc()
          break
        default:
          message.warning('开发中...')
          break
      }
    }

    // 初始化
    onMounted(() => {
      currentDevId.value = props.value.devId
      // console.log(props.value, 'props.value')
    })

    // 当前的devId
    const currentDevId = ref(null)

    // 查询校准配置列表的函数
    const selectCalibrationConfListFunc = async () => {
      console.log(currentDevId.value, 'currentDevId.value')

      // currentDevId.value
      await selectCalibrationConfApi({devId: currentDevId.value}).then(res => {
        disposeCalibrarionConfDataFunc(res.data)
      })
    }

    // 处理请求的校准配置数据的函数
    const disposeCalibrarionConfDataFunc = (data: calibrationConfListType) => {
      if (data.length == 0) {
        message.warning('该设备暂无校准模式!')
      }
      /* 筛选选择框数据 */
      let selectArr = []
      /* 处理配置数据值为空时 */
      data.forEach((item: calibrationConfType) => {
        item.dataRange = ''
      })
      calibrationConfList.value = data
      // calibrationConfSelectShowData.value = selectArr
    }

    // 校准配置列表数据
    const calibrationConfList = ref<calibrationConfListType>([])

    // 校准配置列表选择框显示的数据
    const calibrationConfSelectShowData = ref<{label: string; value: number}[]>([])

    // 当前选择的校准配置数据
    const currentSelectedCalibrationConfInfo = ref<calibrationConfType>({
      controlId: 0,
      controlName: '',
      devId: 0,
      addressCode: '',
      funCode: '',
      startHex: '',
      dataType: '',
      dataRange: '',
      controlDesc: ''
    })

    // 校准配置弹窗显隐标识
    const isShowCalibrationModal = ref(false)

    // 校准数据数字输入框是否禁用的标识
    const isCalibrationDataInputNumberDisble = ref(true)
    // 校准配置选择框的change事件
    const calibrationConfChange = e => {
      currentSelectedCalibrationConfInfo.value = calibrationConfList.value.filter(
        item => item.controlName == e
      )[0]
      isCalibrationDataInputNumberDisble.value = false
      console.log(currentSelectedCalibrationConfInfo.value)
    }

    // 校准配置弹窗的取消点击事件
    const calibrationModalCancelClick = () => {
      isCalibrationDataInputNumberDisble.value = true
      currentSelectedCalibrationConfInfo.value = {
        controlId: 0,
        controlName: '',
        devId: 0,
        addressCode: '',
        funCode: '',
        startHex: '',
        dataType: '',
        dataRange: '',
        controlDesc: ''
      }
    }
    // 校准配置弹窗确认点击事件
    const calibrationModalOkClick = async () => {
      // 非空校验
      let formInfo = currentSelectedCalibrationConfInfo.value
      if (
        formInfo.dataRange != null &&
        formInfo.dataRange != undefined &&
        formInfo.dataRange != '' &&
        formInfo.dataRange != 0
      ) {
        // message.success('校验通过', 22000)
        await exeCalibrationApi({
          controlId: currentSelectedCalibrationConfInfo.value.controlId,
          calibrationValue: currentSelectedCalibrationConfInfo.value.dataRange
        })
          .then(res => {
            message.success('校准成功!')
            isShowCalibrationModal.value = false
          })
          .catch(err => {
            message.error('校准失败,请联系管理员!')
          })
      } else {
        message.warning('校准数据不能为 "空" 或 "0"!')
      }
      console.log(currentSelectedCalibrationConfInfo.value)
    }

    // 搜索数据
    const calibrationConfSearchName = ref('')

    return () => (
      <div
        class='w-full h-24 flex justify-center items-center cursor-pointer'
        onClick={() => {
          if (props.onClick) {
            props.onClick()
          } else {
            handleQiuickClick()
          }
        }}
      >
        {/* 校准配置弹窗 */}
        <a-modal
          v-model={[isShowCalibrationModal.value, 'visible']}
          title='校准配置'
          onOk={calibrationModalOkClick}
          onCancel={calibrationModalCancelClick}
        >
          <div class='calibrationConf_modal_box'>
            <div class='header_selele_box cItem'>
              <span class='label'>校准模式</span>
              <a-select
                v-modal={[currentSelectedCalibrationConfInfo.value.controlId, 'value']}
                allowClear
                show-search
                placeholder='请选择校准模式'
                style='width: 200px'
                fieldNames={{
                  label: 'controlName',
                  value: 'controlName'
                }}
                options={calibrationConfList.value}
                onChange={calibrationConfChange}
              ></a-select>
            </div>
            <div class='main_value_box cItem'>
              <span class='label'>校准数据</span>
              <a-input
                style='width:150px'
                v-model={[currentSelectedCalibrationConfInfo.value.dataRange, 'value']}
                disabled={isCalibrationDataInputNumberDisble.value}
              />
              <span>
                <a-tooltip title='请先选择校准模式，再输入校准数据!' placemen='bottom'>
                  <svg
                    t='1700724005434'
                    class='icon'
                    viewBox='0 0 1024 1024'
                    version='1.1'
                    xmlns='http://www.w3.org/2000/svg'
                    p-id='4043'
                    width='30'
                    height='30'
                    style='position: absolute;top: 12px;left: 90px;cursor: pointer;'
                  >
                    <path
                      d='M527.1808 208.66048c-167.91552 0-304.00512 136.0896-304.00512 304s136.0896 304.00512 304.00512 304.00512 304.00512-136.0896 304.00512-304.00512-135.95648-304-304.00512-304z m-49.80224 488.42752c-20.10624 0-33.95584-9.58464-33.95584-31.0272 0-26.89536 18.90816-73.10336 22.90176-82.69312l38.8864-99.06688c3.86048-10.12224-1.06496-15.1808-5.59616-15.1808-20.63872 0-47.40608 49.00352-57.39008 49.00352-3.86048 0-7.1936-3.86048-7.1936-7.3216 0-10.12224 24.50432-33.82272 31.82592-41.14944 22.23616-21.43744 51.26656-37.6832 83.61984-37.6832 23.97184 0 49.54112 14.64832 29.56288 69.24288l-40.08448 109.72672c-3.32288 8.51968-9.45152 22.5024-9.45152 31.55968 0 3.86048 2.12992 7.84896 6.66112 7.84896 16.64 0 47.26784-47.80032 55.12704-47.80032 2.79552 0 6.656 3.328 6.656 8.51968-0.128 16.11264-65.24416 86.02112-121.56928 86.02112z m95.872-285.4912c-22.90176 0-37.81632-15.1808-37.81632-38.3488 0-24.76544 21.17632-45.00992 45.67552-45.00992 22.24128 0 38.3488 15.1808 38.48192 38.3488-0.13312 25.96864-21.2992 45.00992-46.34112 45.00992z'
                      fill='#f8b54c'
                      p-id='4044'
                    ></path>
                  </svg>
                </a-tooltip>
              </span>
            </div>
          </div>
        </a-modal>
        <IconImg
          imgName={DevFunImgNameEnum[props.value.devFunCode]}
          class='w-24 h-24 transition-all transform hover:opacity-105 mr-6'
        ></IconImg>
        <CnNormalSpan class='text-12 text-text'>{props.value.devFunName || '---'}</CnNormalSpan>
      </div>
    )
  }
})
